<template>
  <el-card>
    <el-scrollbar max-height="400px" ref="scrollRef">
      <div ref="chatWrapRef" class="chat__wrap">
        <div v-for="message in messages" :key="message._id">
          <!-- 我的的消息右边 -->
          <div v-if="message.username === username">
            <p class="chat__time">{{ message.time }}</p>
            <div class="chat__my">
              <span class="chat__username">我</span>
              <span class="chat__content">{{ message.content }}</span>
            </div>
          </div>
          <!-- 别人的消息左边 -->
          <div v-else>
            <p class="chat__time">{{ message.time }}</p>
            <div class="chat__others">
              <span class="chat__username">{{ message.username }}</span>
              <span class="chat__content">{{ message.content }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <el-input type="textarea" v-model="content"></el-input>
    <el-button type="primary" @click="sendMessage">发送</el-button>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "Chat",
};
</script>

<script lang="ts" setup>
import { onMounted, ref, nextTick } from "vue";
import axios from "axios";
import { io } from "socket.io-client";
import dayjs from "dayjs";

const messages = ref<
  {
    _id?: string;
    username: string;
    content: string;
    time: string;
  }[]
>([]);

const content = ref("");
const username = ref(localStorage.getItem("username") as string);

onMounted(async () => {
  const res = await axios.get("/api/getMessages");
  messages.value = res.data.data;
  await nextTick();
  // 设置滚动条位置
  scrollRef.value.setScrollTop(chatWrapRef.value.clientHeight);
});

// 连接远程ws服务器
const socket = io("ws://120.79.201.157:5000");

const scrollRef = ref();
const chatWrapRef = ref();

const sendMessage = async () => {
  if (!content.value) return;

  const message = {
    username: username.value,
    content: content.value,
    time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  };
  // 发送消息
  socket.emit("receive_message", message);
  // 添加消息
  messages.value.push(message);
  // 清空消息
  content.value = "";
  // 等页面更新完毕
  await nextTick();
  // 设置滚动条位置
  scrollRef.value.setScrollTop(chatWrapRef.value.clientHeight);
};

socket.on("send_message", async (data) => {
  messages.value.push(data);
  await nextTick();
  // 设置滚动条位置
  scrollRef.value.setScrollTop(chatWrapRef.value.clientHeight);
});
</script>

<style scoped>
.chat__wrap {
  padding: 20px;
  background-color: #ccc;
}
.chat__time {
  text-align: center;
  font-size: 12px;
}

.chat__my {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 13px;
}

.chat__others {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chat__others .chat__content {
  background-color: #fff;
  color: #000;
}

.chat__content {
  font-size: 15px;
  margin-top: 10px;
  background-color: rgb(31, 140, 235);
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}
</style>
